<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>图片上传</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${base}/rs/css/bootstrap.4.0.css" type="text/css" />
  <link rel="stylesheet" href="${base}/rs/css/app.v2.css" type="text/css" />
  <link rel="stylesheet" href="${base}/rs/css/bootstrap-table.css" type="text/css" />
  <link rel="stylesheet" href="${base}/rs/plugins/lightbox/lightbox.min.css" type="text/css" />
  <style type="text/css">
    .lh400{line-height: 400px;}
  </style>
</head>

<body>
<section class="vbox">
          <section class="scrollable padder">

            <div class="m-b-md">
              <h3 class="m-b-none"></h3>
            </div>
            <section class="panel panel-default">

              <div class="panel-body col-lg-12">
                <form class="form-inline col-lg-12" role="form">
                  <a href="javaScript:void(0);" id="sysOssConfig" class="btn btn-success m-l" data-toggle="modal">配置</a>
                  <@shiro.hasPermission name="sysOss/picture">
                    <a href="javaScript:void(0);" id="AddEntity" class="btn btn-success m-l" data-toggle="modal">添加</a>
                  </@shiro.hasPermission>
                </form>
              </div>
            </section>
            <table class="table table-striped b-t b-light text-sm" id="table">
            </table>
          </section>
        </section>
<script src="${base}/rs/plugins/lightbox/lightbox-plus-jquery.min.js"></script>
<script src="${base}/rs/js/jquery-3.2.0.min.js"></script>
<script src="${base}/rs/js/layer/layer.js"></script>
<script src="${base}/rs/js/layer/commont.js"></script>
<script src="${base}/rs/js/bootstrap.4.0.js"></script>
<script src="${base}/rs/js/bootstrap-table.js"></script>
<script src="${base}/rs/js/bootstrap-table-zh-CN.js"></script>

<script>
    //解决lightbox和jquery冲突
    jQuery.noConflict();
</script>

<script type="text/javascript">
    (function(){
        var $table = jQuery('#table');
        var actionEvents = {
            'click .edit': function (e, value, row, index) {
                layer.open({
                    type: 2,
                    title: '修改',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['430px', '520px'], //宽高
                    content: ['${base}/sysOss/SelectEntity?userId='+row.id, 'yes'],
                    yes:function (index,layero){
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            },
            'click .remove': function (e, value, row, index) {
                layer.confirm("是否【"+row.id+"】？",{icon:4}, function(){
                    jQuery.ajax({
                        type: "GET",
                        url: "/sysOss/DeleteEntity",
                        data: {"id":row.id,"_method":"DELETE"},
                        success: function(result){
                            if(1==result.returnInfo.state){
                                showLayerAlert("删除成功！");
                            }else{
                               showLayerAlert(result.returnInfo.errorMsg);
                            }
                        },
                        error: function(result){
                            $table.bootstrapTable("refresh");
                            layer.msg(result.state, {icon: 6,time: 3*1000});
                        }
                    });
                });
            }
        };

        $(function(){
            initTable();
            /**增加*/
            jQuery("#AddEntity").click(function () {
                layer.open({
                    type: 2,
                    title: '上传',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['560px', '520px'], //宽高
                    content: ['${base}/sysOss/picture', 'yes'],
                    yes:function (index,layero){
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            })
            //配置
            jQuery("#sysOssConfig").click(function () {
                layer.open({
                    type: 2,
                    title: '云存储配置',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['630px', '520px'], //宽高
                    content: ['${base}/sysConfig/ossView', 'yes'],
                    yes:function (index,layero){
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            })


        });
        /** 初始化表格数据 */
        function initTable() {
            $table.bootstrapTable({
                method: 'post',
                url: '/sysOss/jsonList',
                striped: true,     //使表格带有条纹
                pagination: true, //在表格底部显示分页工具栏
                showColumns: true,//列选择按钮
                pageSize: 2,
                pageNumber: 1,
                pageList: [10, 20, 50, 100, 200, 500],
                idField: "userid",  //标识哪个字段为id主键
                sidePagination: "server",//表格分页的位置
                contentType: "application/x-www-form-urlencoded", //解决POST提交问题
                queryParams:queryParams,
                onLoadSuccess:function (data) {
                    if (data.total==0){
                        //layer.msg('未查询到数据', {icon: 6,time: 3*1000});
                        $table.bootstrapTable("removeAll");
                    }
                }, //参数
                queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
                toolbar: "#toolbar", //设置工具栏的Id或者class
                columns: [{
                    title: '序号',
                    width:'10%',
                    align: 'center;line-height:40px',
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                },{
                    field: 'url',
                    title: '链接',
                    align: 'center;line-height:40px',
                    formatter: function (value, row, index) {
                        var aUrl=value.replace('_NEW','');//利用上传中的图片压缩
                        return "<a class='example-image-link' href='"+value+"' data-lightbox='example-"+(index+1)+"'><img class='example-image' src='"+aUrl+"'  alt='image-1' style='height: 40px;'/>";
                    }
                },{
                    field: 'qrcodeUrl',
                    title: '二维码',
                    align: 'center;line-height:40px',
                    formatter: function (value, row, index) {
                        return "<a class='example-image-link' href='"+value+"' data-lightbox='example-"+(index+1)+"'><img class='example-image' src='"+value+"' style='height: 40px;'/>";
                    }
                }, {
                    field: 'createtime',
                    title: '创建时间',
                    align: 'center;line-height:40px',
                    width:'20%'
                } , {
                    field: 'action',
                    title: '操作',
                    align: 'center;line-height:40px',
                    width:'13%',
                    formatter: actionFormatter,
                    events: actionEvents
                }], //列
                silent: true,  //刷新事件必须设置
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    jQuery('#table').bootstrapTable('removeAll');
                },
            });

        }
      /*封装查询参数*/
        function queryParams(params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize: params.limit,   //页面大小
                pageNum: params.offset  //页码
            };
            return temp;
        }
        /**
         *  table最后一列的操作
         */
        function actionFormatter(value, row, index) {
            return [
                '<a href="javaScript:void(0);" class="edit"  data-toggle="class">修改</a> ' +
                '&nbsp;&nbsp;' +
                '<a href="javaScript:void(0);" class="remove" data-toggle="class">删除</a>'
            ].join('');
        }
    })(jQuery);

</script>
</body>
</html>
